<template>
  <div v-if="orderDetail.orderBase" class="detail">
    <el-card shadow="never" class="margin-30">
      <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
      <el-steps :active="orderDetail.orderBase.status+1" finish-status="success" style="padding:20px 200px;">
        <el-step title="待付款" :description="orderDetail.orderBase.createTime" />
        <el-step title="待发货" :description="orderDetail.orderBase.paymentTime" />
        <el-step title="已发货" :description="orderDetail.orderBase.deliveryTime" />
        <el-step v-if="orderDetail.orderBase.status!=4" title="已完成" :description="orderDetail.orderBase.receiveTime" />
        <el-step v-if="orderDetail.orderBase.status!=3" title="退货" :description="orderDetail.orderBase.finishTime" />
      </el-steps>
      <el-divider />
      <div class="common-title">
        <h4>订单信息:

          <el-tag v-if="orderDetail.orderBase.status==0" type="danger" size="mini" effect="dark">待付款</el-tag>
          <el-tag v-if="orderDetail.orderBase.status==1" type="warning" size="mini" effect="dark">待发货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status==2" type="info" size="mini" effect="dark">已发货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status==3" type="success" size="mini" effect="dark">已完成</el-tag>
          <el-tag v-if="orderDetail.orderBase.status==4" size="mini" effect="dark">退货</el-tag>
          <el-tag v-if="orderDetail.orderBase.status==5" size="mini" effect="dark">无效订单</el-tag>

        </h4>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>
              <span>订单金额:</span>
              <span style="color:red;">{{ orderDetail.orderBase.totalAmount }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>订单编号:</span>
              <span>{{ orderDetail.orderBase.orderSn }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>用户账号:</span>
              <span>{{ orderDetail.orderBase.memberUsername }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>备注:</span>
              <span>{{ orderDetail.orderBase.note }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <p>
              <span>下单时间:</span>
              <span>{{ orderDetail.orderBase.createTime }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>订单编号:</span>
              <span>{{ orderDetail.orderBase.orderSn }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>用户账号:</span>
              <span>{{ orderDetail.orderBase.memberUsername }}</span>
            </p>
          </el-col>
          <el-col :span="6" :offset="0">
            <p>
              <span>备注:</span>
              <span>{{ orderDetail.orderBase.note }}</span>
            </p>
          </el-col>
        </el-row>

      </div>
      <el-divider />
      <div class="common-title">
        <h4>收货人信息:</h4>
      </div>
      <el-divider />
      <div class="common-title">
        <h4>商品信息:</h4>
      </div>
      <el-table :data="orderDetail.orderItems" border stripe>
        <el-table-column

          prop="productName"
          label="商品名称"
        />
        <el-table-column

          label="商品图片"
        >
          <template slot-scope="scope">
            <img width="100" height="100" :src="scope.row.productSkuPic" alt="">
          </template>
        </el-table-column>
        <el-table-column

          label="是否退货"
        >
          <template slot-scope="scope">
            <p> {{ scope.row.isReturn==0?'否':'是' }} </p>
          </template>
        </el-table-column>
        <el-table-column

          prop="productBrand"
          label="品牌"
        />
        <el-table-column

          prop="productPrice"
          label="价格"
        />
        <el-table-column

          prop="productQuantity"
          label="商品数量"
        />
        <el-table-column

          label="小计"
        >
          <template slot-scope="scope">
            <p> {{ scope.row.productQuantity * scope.row.productPrice }} </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="common-title">
        <h4>费用信息:</h4>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0" />
          <el-col :span="6" :offset="0" />
          <el-col :span="6" :offset="0" />
          <el-col :span="6" :offset="0" />
        </el-row>

      </div>
      <!-- 物流公司 -->
      <div v-if="orderDetail.orderBase.status == 1">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-form-item label="物流公司" prop="deliveryCompany">
                <!-- <el-input v-model="form.deliveryCompany" /> -->
                <el-select v-model="form.deliveryCompany" placeholder="物流公司" clearable>
                  <el-option
                    label="中国邮政"
                    value="中国邮政"
                  />
                  <el-option
                    label="申通"
                    value="申通"
                  />
                  <el-option
                    label="顺丰"
                    value="顺丰"
                  />
                  <el-option
                    label="京东"
                    value="京东"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="物流单号" prop="deliverySn">

                <el-input v-model="form.deliverySn" placeholder="物流单号" size="mini" clearable />
              </el-form-item>

            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" @click="doSendProduct">确认发货</el-button>

          </el-form-item>
        </el-form>

      </div>
      <!-- 物流信息 -->
      <div v-if="orderDetail.orderBase.status != 0 || orderDetail.orderBase.status !=1">
        <div class="common-title">
          <h4>物流信息:</h4>
        </div>
      </div>
      <el-divider />

    </el-card>

  </div>
</template>
<script>
import {
  orderDetail as orderDetailApi,
  sendDone as sendDoneApi
} from '@/api/order/order'
export default {
  name: 'OrderDetail',
  mixins: [],
  data() {
    return {
      form: {},
      orderId: '',
      orderDetail: {},
      rules: {
        deliveryCompany: { required: true, message: '物流公司必填', trigger: 'blur' },
        deliverySn: { required: true, message: '物流单号必填', trigger: 'blur' }
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.orderId = this.$route.params.id
    this.getOrderDetail()
  },
  mounted() {
  },
  methods: {
    doSendProduct() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          //
          this.form.orderId = this.orderId
          const res = await sendDoneApi(this.form)
          const { success, message } = res
          if (success) {
            // 数据更新
            this.getOrderDetail()
          } else {
            this.$message.error(message)
          }
        }
      })
    },
    async getOrderDetail() {
      const res = await orderDetailApi(this.orderId)
      const { success, data, message } = res
      if (success) {
        this.orderDetail = data.orderDetail
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
